<template>
    <el-dialog v-model="isOpen" title="帕累托分析结果" width="800" :border="true" align-center>
        <div class="chart-container">
            <div ref="chartRef" class="chart" />
        </div>

        <template #footer>
            <el-button type="primary" @click="isOpen = false">关闭</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { nextTick, ref, watch } from "vue"
import * as echarts             from "echarts"

// 接收外部传入的控制参数和数据
let isOpen  = defineModel()
const props = defineProps([ "result" ])

const chartRef    = ref(null)
let chartInstance = null

// 监听弹窗显示状态，初始化图表
watch(isOpen, (val) => {
    if(val){
        initChart()
    }
})

const initChart = () => {
    nextTick(() => {
        if(!chartRef.value){
            return
        }

        // 初始化图表实例
        if(!chartInstance){
            chartInstance = echarts.init(chartRef.value)
        }

        const { sortedFactors, threshold } = props.result
        const xAxisData                    = sortedFactors.map(item => item.factorName)

        // 准备双Y轴数据
        const barData  = sortedFactors.map(item => item.impactValue)
        const lineData = sortedFactors.map(item => item.cumulativeProportion)

        // 配置帕累托图选项
        const option = {
            tooltip: {
                trigger    : "axis",
                axisPointer: { type: "shadow" },
                formatter  : params => {
                    const factor = sortedFactors[params[0].dataIndex]
                    return `
                      ${ factor.factorName }<br>
                      影响值: ${ factor.impactValue }<br>
                      占比: ${ factor.proportion.toFixed(2) }%<br>
                      累计占比: ${ factor.cumulativeProportion.toFixed(2) }%
                    `
                },
            },
            legend : {
                data: [ "影响值", "累计占比" ],
            },
            grid   : {
                left        : "3%",
                right       : "4%",
                bottom      : "3%",
                containLabel: true,
            },
            xAxis  : {
                type     : "category",
                data     : xAxisData,
                axisLabel: { rotate: 30 },
            },
            yAxis  : [
                {
                    type     : "value",
                    name     : "影响值",
                    axisLabel: { formatter: "{value}" },
                },
                {
                    type     : "value",
                    name     : "累计占比",
                    min      : 0,
                    max      : 100,
                    axisLabel: { formatter: "{value}%" },
                },
            ],
            series : [
                {
                    name     : "影响值",
                    type     : "bar",
                    data     : barData,
                    itemStyle: {
                        color: params => {
                            return lineData[params.dataIndex] <= threshold ? "#f56c6c" : "#409eff"
                        },
                    },
                    emphasis : { focus: "series" },
                },
                {
                    name      : "累计占比",
                    type      : "line",
                    yAxisIndex: 1,
                    data      : lineData,
                    symbol    : "circle",
                    symbolSize: 8,
                    lineStyle : { width: 2 },
                    itemStyle : { color: "#e6a23c" },
                    label     : {
                        show     : true,
                        formatter: params => `${ params.value.toFixed(2) }%`,
                        position : "top",
                    },
                },
                // 阈值参考线
                {
                    name      : "阈值线",
                    type      : "line",
                    yAxisIndex: 1,
                    data      : new Array(xAxisData.length).fill(threshold),
                    lineStyle : {
                        type : "dashed",
                        color: "#909399",
                    },
                    label     : {
                        show     : true,
                        position : "end",
                        formatter: `${ threshold }%`,
                    },
                    tooltip   : { show: false },
                },
            ],
        }

        chartInstance.setOption(option)
    })
}

</script>

<style scoped>
.chart-container {
    width: 100%;
    height: 500px;

    .chart {
        width: 100%;
        height: 100%;
    }
}
</style>
